<template>
  <static-content-wrapper :designer="designer" :settings="settings" :field="field" :design-state="designState"
    :hidden="field.options.hidden" :parent-widget="parentWidget" :parent-list="parentList"
    :index-of-parent-list="indexOfParentList" :sub-form-row-index="subFormRowIndex"
    :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId" :allow-select="allowSelect">
    <div ref="fieldEditor" class="field-editor module-field-editor" :style="{
      display: field.widgetList && field.widgetList.length > 0 ? 'block' : 'flex',
      justifyContent: justifyContent,
      alignItems: alignItems,
      width: scaleWidth + 'px',
      height: scaleHeight + 'px',
      backgroundColor: backgroundColor,
      borderStyle: 'solid',
      borderWidth: scaleBorderWidth + 'px',
      borderColor: field.options.colorLine,
      borderRadius: scaleBorderRadius + 'px',
      opacity: field.options.opa / 255
    }">
      <!-- 左边 -->
      <div class='slide-button-left-field-editor' :style="{
        height: scaleButtonWidth + 'px',
        width: scaleButtonWidth + 'px',
        bottom: scaleButtonHeight + 'px',
      }">
        <el-image ref="imgRef1" class="img" :src="leftImgUrl" fit="cover" :style="pictureStyle" />
      </div>

      <div class="contentList" :style="{
        width: scaleContentWidth + 'px',
        'margin-left': scaleButtonWidth + 'px',
      }
        ">
        <template v-for="(widget, index) in field.widgetList || []" :key="widget.id">
          <div class="widget-list-container module-container">
            <component :is="getWidgetName(widget)" :field="widget" :designer="designer" :parent-list="field.widgetList"
              :index-of-parent-list="index" :parent-widget="field" :design-state="true" :allow-select="false"
              :scale="scale" :style="{
                left: widget.options.x * scale + 'px',
                top: widget.options.y * scale + 'px'
              }"></component>
          </div>
        </template>
      </div>

      <!-- 右边 -->
      <div class='slide-button-right-field-editor' :style="{
        height: scaleButtonWidth + 'px',
        width: scaleButtonWidth + 'px',
        bottom: scaleButtonHeight + 'px',
      }">
        <el-image ref="imgRef2" class="img" :src="rightImgUrl" fit="cover" :style="pictureStyle" />
      </div>
    </div>
  </static-content-wrapper>
</template>

<script>
import emitter from '@/mixins/emitter'
import fieldMixin from '@/mixins/fieldMixin'
import { ALIGN_TYPE } from '@/designer/const'
import * as EVENTS from '@/designer/event'

export default {
  name: 'SlidePageWidget',
  componentName: 'SlidePageWidget',
  // 必须固定为FieldWidget，用于接收父级组件的broadcast事件
  mixins: [emitter, fieldMixin],
  props: {
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    settings: Object,
    scale: {
      type: Number,
      default: 1
    },
    allowSelect: {
      type: Boolean,
      default: true
    },

    designState: {
      type: Boolean,
      default: false
    },

    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */
      type: Number,
      default: -1
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */
      type: Number,
      default: -1
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */
      type: String,
      default: ''
    }
  },
  data() {
    return {
      pictrueUrl: '',
      loadImg: 0,
      leftImgUrl: '',
      rightImgUrl: '',
      pictureStyle: ''
    }
  },
  computed: {
    scaleWidth() {
      return this.field.options.width * this.scale
    },
    scaleHeight() {
      return this.field.options.height * this.scale
    },

    //
    scaleButtonWidth() {
      return this.field.options.slideButtonWidth * this.scale
    },
    scaleButtonHeight() {
      return this.field.options.slideButtonHeight * this.scale
    },

    scaleContentWidth() {
      return (this.field.options.width * this.scale) - (2 * this.field.options.slideButtonWidth)
    },

    scaleBorderWidth() {
      return this.field.options.widthLine * this.scale
    },
    scaleBorderRadius() {
      return this.field.options.radius * this.scale
    },
    justifyContent() {
      const align = this.field.options.titleAlign
      if (
        align === ALIGN_TYPE.LV_ALIGN_TOP_LEFT ||
        align === ALIGN_TYPE.LV_ALIGN_LEFT_MID ||
        align === ALIGN_TYPE.LV_ALIGN_BOTTOM_LEFT
      ) {
        return 'start'
      } else if (
        align === ALIGN_TYPE.LV_ALIGN_TOP_RIGHT ||
        align === ALIGN_TYPE.LV_ALIGN_RIGHT_MID ||
        align === ALIGN_TYPE.LV_ALIGN_BOTTOM_RIGHT
      ) {
        return 'end'
      } else {
        return 'center'
      }
    },
    alignItems() {
      const align = this.field.options.titleAlign
      if (
        align === ALIGN_TYPE.LV_ALIGN_TOP_LEFT ||
        align === ALIGN_TYPE.LV_ALIGN_TOP_MID ||
        align === ALIGN_TYPE.LV_ALIGN_TOP_RIGHT
      ) {
        return 'start'
      } else if (
        align === ALIGN_TYPE.LV_ALIGN_BOTTOM_LEFT ||
        align === ALIGN_TYPE.LV_ALIGN_BOTTOM_MID ||
        align === ALIGN_TYPE.LV_ALIGN_BOTTOM_RIGHT
      ) {
        return 'end'
      } else {
        return 'center'
      }
    },
    backgroundPositionX() {
      const align = this.field.options.pngAlign
      if (
        align === ALIGN_TYPE.LV_ALIGN_TOP_LEFT ||
        align === ALIGN_TYPE.LV_ALIGN_LEFT_MID ||
        align === ALIGN_TYPE.LV_ALIGN_BOTTOM_LEFT
      ) {
        return 'left'
      } else if (
        align === ALIGN_TYPE.LV_ALIGN_TOP_RIGHT ||
        align === ALIGN_TYPE.LV_ALIGN_RIGHT_MID ||
        align === ALIGN_TYPE.LV_ALIGN_BOTTOM_RIGHT
      ) {
        return 'right'
      } else {
        return 'center'
      }
    },
    backgroundColor() {
      return this.field.options.color
    }
  },
  watch: {
    'field.options': {
      deep: true,
      handler(val) {
        if (val) {
          this.getImgStart('left')
          this.getImgStart('right')
        }
      }
    }
  },
  created() {
    /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
         需要在父组件created中初始化！！ */
    this.registerToRefList()
    this.initEventHandler()

    this.handleOnCreated()
  },

  mounted() {
    this.handleOnMounted()
    this.$emitter.on(EVENTS.GET_IMAGE_RESOURCE_RESULT, this.getImageResourceResult)
    if (this.field.options.slideButtonLeft) {
      this.getImgStart('left')
    }
    if (this.field.options.slideButtonRight) {
      this.getImgStart('right')
    }
  },

  beforeUnmount() {
    this.unregisterFromRefList()
  },

  methods: {
    getWidgetName(widget) {
      return widget.type + '-widget'
    },

    getImgStart(extend) {
      let params = {
        name: (extend === 'left')
          ? this.field.options.slideButtonLeft : this.field.options.slideButtonRight,
        id: this.field.options.id,
        extend: extend
      }

      this.$emitter.emit(EVENTS.GET_IMAGE_RESOURCE, params)
    },

    getImageResourceResult(data) {
      console.log(data)
      if (data.id != this.field.options.id) {
        return
      }
      if (data && data.name) {
        if (data.result) {
          if (data.extend == 'left') {
            this.leftImgUrl = data.result.url
          } else if (data.extend == 'right') {
            this.rightImgUrl = data.result.url
          }
          this.pictureStyle = {}
        } else {
          this.pictrueUrl = ''
          this.pictureStyle = {
            width: 100 * this.scale + 'px',
            height: 100 * this.scale + 'px'
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.contentList {
  height: 100%;
  //background-color: #eee;
  position: relative;
}

.button-field-editor {
  overflow: hidden;
}

.img {
  width: 100%;
  height: 100%;
}

.slide-button-left-field-editor {
  display: block;
  // background-color: antiquewhite;
  left: 0px;
  position: absolute;
}

.slide-button-right-field-editor {
  display: block;
  // background-color: antiquewhite;
  right: 0px;
  position: absolute;
}
</style>
